<template>
  <div align="center">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      input-align="center"
      @cancel="onCancel"
      @input="onInput"
    />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
      <div v-for="(item, index) in list" :key="index">
        <span v-show="false">{{ item.movieInfo }}</span>
        <span v-html="item.movieName" @click="onClickItemMovie($event)" />
        <van-divider />
      </div>
    </van-list>
    <div id="mainDiv">
      <h3>
        片名:
        <span>{{ movieAttr.movieName }}</span>
      </h3>
      <section id="videoPlayer"></section>
      <br />
      <!-- 卡密列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 30%; padding-top: 10px"
      >
        <van-coupon-list
          :show-count="false"
          :show-close-button="false"
          :input-placeholder="cdkeyPlaceholderDec"
          @exchange="onExchange"
        />
      </van-popup>

      <div align="center">
        <van-button type="primary" size="large" @click="refreshPage"
          >切换点播视频</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dibbling_vue",
  data() {
    return {
      movieAttr: "",
      value: "",
      list: [],
      finished: false,
      loading: true,
      cdkeyPlaceholderDec: "请输入卡密激活观影权限",
      showList: false,
    };
  },
  mounted() {
    this.$axios
      .get("/cloud_api/admin/getMovieName?model=green")
      .then((response) => {
        // 访问权限控制
        let authFlag = true;
        if (response.data.resultCode === 1002) {
          // 登录成功
          this.$dialog
            .alert({
              message: response.data.tipMsg,
              theme: "round-button",
            })
            .then(() => {
              this.$router.push({ path: "/login?model=green" });
            });
        } else if (response.data.resultCode === 1003) {
          authFlag = false;
          this.$dialog
            .confirm({
              message: response.data.tipMsg,
              theme: "round-button",
            })
            .then(() => {
              this.showList = true;
              setTimeout(function () {
                $(".van-coupon-list__exchange-bar").siblings().remove();
              }, 10);
            })
            .catch(() => {
              this.$router.push({ path: "/login?model=green" });
            });
        }
        if (!authFlag) return;
        response.data.movieName = response.data.movieName.split(".")[0];
        this.movieAttr = response.data;
        var html =
          "<video id='video' class='video-js vjs-default-skin vjs-big-play-centered' preload='auto'>" +
          "<source src='/cos_api/green_movie/" +
          response.data.url +
          "' type='application/x-mpegURL'></source>" +
          "</video>";
        $("#videoPlayer").append(html);
        this.initVideo();
      })
      .catch(function (error) {
        console.log(error);
      });
    $(".van-list").hide();
    $("#mainDiv").show();
  },
  methods: {
    onExchange(code) {
      this.$axios
        .get("/cloud_api/pay/activatePermissions?cdkey=" + code)
        .then((response) => {
          if (response.data.resultCode === 200) {
            this.$dialog
              .alert({
                message: response.data.tipMsg,
                theme: "round-button",
              })
              .then(() => {
                this.showList = false;
                this.$router.push({ path: "/login?model=green" });
              });
          } else {
            this.$dialog.alert({
              message: response.data.tipMsg,
              theme: "round-button",
            });
          }
        });
    },
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(video, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        /* //自动播放属性,muted:静音播放
          autoplay: "muted", */
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "400px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "400px",
      });
    },
    onCancel() {
      $(".van-list").hide();
      $("#mainDiv").show();
    },
    onInput(val) {
      $(".van-list").show();
      $("div.van-list__finished-text").prevAll().remove();
      $("#mainDiv").hide();
      this.list = [];

      this.$axios
        .get("/cloud_api/admin/getMovieNameByES?keyword=" + val +"&model=green")
        .then((response) => {
          // 访问权限控制
          let authFlag = true;
          if (response.data.resultCode === 1003) {
            authFlag = false;
            this.$dialog.alert({
              message: response.data.tipMsg,
              theme: "round-button",
            });
          }
          this.finished = true;
          if (!authFlag) return;
          this.list = response.data;
        })
        .catch(function (error) {
          console.log(error);
          this.finished = true;
        });
    },
    onClickItemMovie(event) {
      var $currentElement = $(event.currentTarget);
      var movieInfo = $currentElement.prev().html();
      var movieInfoObj = JSON.parse(movieInfo);
      movieInfoObj.movieName = movieInfoObj.movieName.split(".")[0];
      this.movieAttr = movieInfoObj;
      var html =
        "<video id='video' class='video-js vjs-default-skin vjs-big-play-centered' preload='auto'>" +
        "<source src='/cos_api/green_movie/" +
        movieInfoObj.url +
        "' type='application/x-mpegURL'></source>" +
        "</video>";
      $("#videoPlayer").empty();
      $("#videoPlayer").append(html);
      this.initVideo();
      $(".van-list").hide();
      $("#mainDiv").show();
    },
    refreshPage() {
      location.reload();
    },
  },
};
</script>

<style>
em {
  color: red;
}
</style>
